<template>
  <div class="new-album">
    <theme-header-rcmd title="新碟上架" />

    <div class="content">
      <button 
        class="arrow arrow-left sprite_02"
        @click="bannerRef.prev()"
      >
      </button>

      <div class="albums">
        <a-carousel ref="bannerRef" :dots="false">
          <template 
            v-for="item in [0, 1, 2]"
            :key="item"
          >
            <div class="page" v-if="newAlbums.length > 0">
              <template
                v-for="iten in newAlbums.slice(item * 5, (item + 1) * 5)"
                :key="iten.id"
              >
                <album-cover 
                  :item="iten"
                  :size="100"
                  :width="115"
                  bgp="-570px"
                />
              </template>
            </div>
          </template>
        </a-carousel>
      </div>

      <button 
        class="arrow arrow-right sprite_02"
        @click="bannerRef.next()"
      >
      </button>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from 'vue'
import { useStore } from "@/store";

import { useState } from "@/hooks";

import ThemeHeaderRcmd from "@/components/theme-header-rcmd/index.vue";
import AlbumCover from "@/components/album-cover/index.vue";

export default defineComponent({
  components: {
    ThemeHeaderRcmd,
    AlbumCover
  },

  setup() {
    const bannerRef = ref(null);
    const store = useStore();

    const { newAlbums } = useState("recommend", ["newAlbums"]);
    
    onMounted(() => {
      store.dispatch("recommend/getNewAlbumsAction", 15)
    })

    return {
      bannerRef,
      newAlbums
    }
  }
})
</script>

<style lang="less" scoped>
@import './index.less';
</style>